<template>
  <div class="box">
    <FullCalendar ref="myCalendar" :options="calendarOptions" class="full-calendar" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import customViewPlugin from './custom-view-file.js'
import calenderFormate from '../untils/calendar' // 农历计算方法
import formatDate from '../untils/untils' // 将日期对象转换成 2020-01-01 格式的日期
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data () {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin, customViewPlugin],
        initialView: 'custom',
        events: [
          {
            id: 1,
            title: '数据1',
            description: 'jhg看过是偶搜哦',
            allDay: true,
            start: new Date(),
            taskLevel: '一级'
          },
          {
            id: 2,
            title: '数据2',
            description: 'jhg看过是偶搜哦',
            taskLevel: '一级',
            start: new Date().getTime() + 24 * 60 * 60 * 1000,
            end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
          },
          {
            id: 3,
            title: '数据3',
            description: 'jhg看过是偶搜哦',
            taskLevel: '一级',
            start: new Date().getTime() - 3 * 24 * 60 * 60 * 1000
          },

          {
            id: 4,
            title: '数据4（增加中国农历、24节气和节假日的问题）',
            description: 'jhg看过是偶搜哦',
            taskLevel: '一级',
            start: new Date(),
            end: new Date().getTime() + 30 * 24 * 60 * 60 * 1000
          },
          {
            id: 5,
            title:
              '数据5（Increase the functions of Chinese lunar calendar, 24 solar terms and holidays）',
            description: 'jhg看过是偶搜哦',
            taskLevel: '一级',
            start: new Date(),
            end: new Date().getTime() + 30 * 24 * 60 * 60 * 1000
          },
          {
            id: 6,
            title:
              '数据6（增加中国农历、24节气和节假日的问题Increase the functions of Chinese lunar calendar, 24 solar terms and holidays）',
            description: 'jhg看过是偶搜哦',
            taskLevel: '一级',
            start: new Date() - 30 * 24 * 60 * 60 * 1000,
            end: new Date().getTime()
          }
        ],
        headerToolbar: {
          left: 'prev,next,today',
          center: 'title',
          right: 'custom,dayGridMonth,timeGridWeek,listDay'
        },
        buttonText: {
          today: '今天',
          custom: '年视图',
          month: '月视图',
          week: '周视图',
          day: '日视图',
          list: '列表视图'
        },
        views: {
          // 对应月视图
          displayEventTime: false, // 是否显示时间
          dayGridMonth: { // 转农历
            dayCellContent (item) {
              let _date = formatDate(item.date).split('-')
              console.log('data', _date)
              let _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
              // let _dateF = calendar.solar2lunar('2021', '6', '1')
              console.log(_dateF)
              return { html: `<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>` }
            }
          },

          // 对应周视图调整
          timeGridWeek: {
            slotMinTime: '09:00', // 周视图开始时间
            slotMaxTime: '20:00', // 周视图结束时间
            displayEventTime: false, // 是否显示时间
            dayHeaderContent (item) {
              let _date = formatDate(item.date).split('-')
              let _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
              return { html: `<h3>${_dateF.ncWeek.slice(2)}</h3><p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>` }
            }
          },
          timeGridDay: {
            dayHeaderContent (item) {
              return { html: `<h3>${item.text}</h3>` }
            }
          }
        },
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        displayEventEnd: true, // 所有视图显示结束时间
        dateClick: this.handleDateClick,
        allowContextMenu: false,
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true
      }
    }
  },
  methods: {
    handleDateClick (date, jsEvent, view) {
      console.log(date, jsEvent, view)
    }
  }
}
</script>
<style lang="scss" scoped>
$color: #1890ff;
.box {
  width: 100%;
  min-width: 900px;
  height: 100%;
  background: #fff;
  .full-calendar {
    padding-top: 20px;
    // height: calc(100% - 30px);
    height: 100%;
    /deep/ .fc-button-primary {
      background-color: #f4f9ff;
      color: #0a283a;
      border: #ebecee 1px solid;
      :active {
        border: none;
        background-color: #1890ff;
      }
    }
    .fc .fc-toolbar-title {
      display: inline-block;
      vertical-align: middle;
    }
    .fc-theme-standard td {
      border-top-color: transparent;
    }
    /deep/.custom-view {
      .view-title {
        color: #0a283a;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        height: 600px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        justify-items: end;
        .mon {
          border: #ebecee 1px solid;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
